<template>
  <el-dialog
    v-model="dialogVisible"
    title="代码预览"
    append-to-body
    width="900"
    @closed="closedHandle"
  >
    <!-- <AceEditor :vlaue="_value" :readOnly="true" /> -->
    <codemirror
      v-model="_value"
      :disabled="true"
      :placeholder="editorPlaceholder"
      :style="{ height: editorHeight + 'px' }"
      :autofocus="true"
      :indent-with-tab="true"
      :tabSize="tabSize"
      :extensions="[vue(), oneDark]"
      :scrollbarStyle="null"
      @change="emit('change', $event)"
    />

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="copy">复制</el-button>
        <el-button type="primary" @click="toProject">生成代码到项目 </el-button>
        <el-button @click="close">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { Codemirror } from "vue-codemirror";
import { vue } from "@codemirror/lang-vue";
import { oneDark } from "@codemirror/theme-one-dark";
import { ref, computed, onMounted } from "vue";
const { ipcRenderer } = window;
const props = defineProps({
  value: {
    type: String,
    default: "",
  },
  editorPlaceholder: {
    type: String,
    default: "请输入代码",
  },
  editorHeight: {
    type: String,
    default: "300",
  },
  tabSize: {
    type: Number,
    default: 2,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["update:value", "change", "close", "toProject"]);
const dialogVisible = ref(true);
const _value = computed({
  get() {
    return props.value || "";
  },
  set(value) {
    emit("update:value", value);
  },
});
const close = () => {
  dialogVisible.value = false;
  emit("close");
};
const closedHandle = () => {
  emit("close");
};

const copy = () => {
  ipcRenderer.send("copyData", props.value);
  ElMessage.info("复制成功");
};
const toProject = () => {
  emit("toProject");
};
defineExpose({
  dialogVisible,
});
</script>

<style scoped lang="scss">
:deep(.el-dialog__title) {
  color: #18181c !important;
}
</style>
